<template>
 <Layout>
<div ref="maincontainer" class="main-container" v-loading='isloading'> 
    <BlogDetail v-if="data" :blog="data"></BlogDetail>
    <DetailComment v-if="!isloading" ></DetailComment>
</div>
<template #right>
<div class="blog-toc"  v-loading='isloading'>
    <BlogTOC v-if="data"  :toc="data.toc"></BlogTOC>
</div>

</template>
 </Layout>
</template>

<script>
import { getBlog } from "../../api/blog"
// import { PostComment } from "../../api/blog"
import fetchData from "../../mixins/fetchData"
import Layout from "../../components/Layout"
import BlogTOC from "./components/BlogTOC.vue"
import BlogDetail from "./components/BlogDetail.vue"
import DetailComment from "./DetailComment.vue"
import setmainScroll from "../../mixins/setmainScroll.js"
import { titleController } from "../../utils"
export default {
    mixins:[fetchData(null), setmainScroll('maincontainer')],
components:{
    Layout,
    BlogTOC,
    BlogDetail,
    DetailComment
},
methods:{
    async fetchData(){
       const resp= await getBlog(this.$route.params.id);
    //    resp=null;
       if(!resp){
           this.$router.push('/404');
           return
       }
       if(resp.title){
           titleController.setRouteTitle(resp.title);
       }
return resp;    
},
},

updated(){
    const hash=location.hash;
    location.hash='';
    setTimeout(()=>{
        location.hash=hash;
    },50)
}

}
</script>

<style  lang="less" scoped>

.main-container{
    scroll-behavior: smooth;
    overflow-y: scroll;
    height: 100%;
    padding: 20px;
    position: relative;
    
}
.blog-toc{
  width: 300px;
  height: 100%;
  overflow-y: scroll;
  box-sizing: border-box;
  position: relative;
  padding: 20px;
}

</style>